<template>
  <div class="group-list panic-buy-list" ref="container" style="background-color: rgb(255, 197, 1)">
    <div class="header"></div>
    <div class="list">
      <div class="pad20">
        <router-link :to="'/user/us/content?type=activity'"><div class="text-center bg-color-red font-color-white font-bold" style="border-radius: .08rem; line-height: .6rem;">活动规则 >></div></router-link>
      </div>
      <div
        class="item acea-row row-between-wrapper"
        v-for="(item, index) in panicBuyList"
        :key="index"
        @click="link(item.id)"
      >
        <div class="pictrue"><img :src="item.image" /></div>
        <div class="text">
          <div class="line1" v-text="item.title"></div>
          <div class="font-color-orange backMoney font-xxs" v-if="item.coupon && item.coupon.length">
            返{{ item.coupon | reductionMoney }}元立减金{{ item.coupon && item.coupon.length ? '包': '' }}
          </div>
          <div class="bottom acea-row row-between-wrapper">
            <div class="money">
              ￥<span class="num" v-text="item.price"></span
              ><span class="y-money" v-text="'已售' + item.sales" style="text-decoration: none"></span>
            </div>
            <div class="groupBnt bg-color-red">
              去抢购<span class="iconfont icon-jiantou"></span>
            </div>
          </div>
        </div>
      </div>
      <Loading :loaded="status" :loading="loadingList"></Loading>
    </div>
  </div>
</template>
<script>
import { getPanicBuyList } from "@api/activity";
import Loading from "@components/Loading";

export default {
  name: "GoodsPanicBuy",
  components: {
    Loading
  },
  props: {},
  data: function() {
    return {
      panicBuyList: [],
      status: false, //列表是否获取完成 false 未完成 true 完成
      loading: false, //当前接口是否请求完成 false 完成 true 未完成
      page: 1, //页码
      limit: 10, //数量
      loadingList: false
    };
  },
  mounted: function() {
    this.getPanicBuyList();
    this.$scroll(this.$refs.container, () => {
      !this.loading && this.getPanicBuyList();
    });
  },
  filters: {
    reductionMoney(item) {
      let money = item.reduce((result, coupon) => {
        return result + coupon.coupon_price;
      }, 0);
      return money;
    }
  },
  methods: {
    getPanicBuyList: function() {
      var that = this;
      if (that.loading) return;
      if (that.status) return;
      getPanicBuyList({ page: that.page, limit: that.limit }).then(res => {
        // console.log('获取1元购商品列表', res);
        that.status = res.data.length < that.limit;
        that.panicBuyList.push.apply(that.panicBuyList, res.data);
        that.page++;
        that.loading = false;
      });
    },
    link: function(id) {
      this.$router.push({
        path: "/activity/panic_buy_detail/" + id
      });
    }
  }
};
</script>

<style scoped>
  .backMoney span:not(:first-child)::before {
    content: "，";
  }
</style>